<template>
	<view class="home">
	      <view class="header">
			  <view class="header-search">
				 <view class="header-ing">
					 <view>
						 <image  class="search-ing" src="https://z3.ax1x.com/2021/04/08/cYpC1H.png"></image>
						 <text>搜索你的关键字</text>
					 </view>
					 <view style="margin-top: 10rpx;">
						 <image class="search-cream" src="https://z3.ax1x.com/2021/04/08/cYpQjs.png"></image>
					 </view>
				 	
				 </view>
				  <view class="header-image">
					  <image  class="search-cart" src="https://z3.ax1x.com/2021/04/08/cYp2CD.png"></image>
					  <image  class="search-messge" src="https://z3.ax1x.com/2021/04/08/cYpa34.png"></image>
				  </view>
				  
			  </view>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		box-sizing: border-box;
		.header{
			
			width: 100wx;
			height: 80rpx;
			padding: 24rpx;
			.header-search{
				width: 100%;
				height:100%;
				display: flex;
				line-height: 88rpx;
				border-radius: 10rpx;
				
			}
			.header-ing{
				display: flex;
				justify-content: space-between;
				width: 75%;
				height: 80%;
				// margin-top: 10rpx; 
				line-height: 80rpx;
				border-radius:100rpx ;
				margin-right: 24rpx;
				border: 2rpx solid #ffc89a;
				color:#ffb908;
				align-items: center;
				font-size: 28rpx;
				.search-ing{
					width: 30rpx;
					height: 30rpx;
					padding-left: 24rpx;
					padding-right: 10rpx;
				}
				.search-cream{
					width: 40rpx;
					height: 35rpx;
					margin-right: 24rpx;
				}
			}
		
			.header-image{
				.search-cart{
					width: 60rpx;
					height: 60rpx;
					margin-right: 12rpx;
				}
				.search-messge{
					width: 60rpx;
					height: 60rpx;
				}
			}
			
			
		}
		
	}

</style>
